<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>

    <style>

    </style>

</head>
<body>
<!--实现输入框实时同步-->
<div id="app">
    <h1>{{msg}}</h1>
    <router-link to="/reg">register</router-link>
    <router-link to="/login">login</router-link>
    <router-view></router-view>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    let login  = {
        template: '<h1>login</h1>',
    };

    let reg  = {
        template: '<h2>register</h2>',
    };

    let router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/reg', component: reg},
        ]
    });

    let vm = new Vue({
        el: "#app",
        data: {
            msg: '',
        },
        methods: {
        },
        // watch事件可以监听data数据变化，提供变化回调
        // @keyup事件只能监听基本元素的事件，不能监听类似路由地址这类的东西，但是watch可以
        watch: {
            '$route.path': function (newVal, oldVal) {
                console.log(newVal, oldVal);
                if (newVal === '/login') {
                    this.msg = 'welcome to login'
                } else {
                    this.msg = 'welcome to register'
                }
            }
        },
        router
    })

</script>
</body>
</html>
